<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<!--<%@ page import="org.petstore.domain.Account "%>-->
<!--<%@ page import="org.petstore.domain.Order" %>-->
<!--<%@ page import="org.petstore.domain.CartItem" %>-->
<!--<%@ page import="java.util.List" %>-->
<div th:replace="common/top">
</div>

<style>
    #first {
        display: none;
        position: absolute;
        top: 10%;
        left: 25%;
        width: 30%;
        height: 70%;
        padding: 20px;
        border: 30px solid rgba(0, 100, 0, 0.6);
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
    #second {
        display: none;
        position: absolute;
        top: 10%;
        left: 25%;
        width: 30%;
        height: 70%;
        padding: 20px;
        border: 30px solid rgba(0, 100, 0, 0.6);
        background-color: white;
        z-index:1002;
        overflow: auto;
    }
    .blackOverlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=88);
    }
    .information {
        width:80%;
    }
    .button1 {
        width:25%;
        font-size: 15px;
        text-align: center;
        padding: 5px;
        margin: 10px;
    }
</style>
<div id="Content">
    <div id="BackLink">
        <a href="/catalog/main">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <div id="Cart">

            <h2>Shopping Cart</h2>
            <form action="" method="post" id="putCart">
                <table>
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>In Stock?</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>
                    <tr th:if="${session.cart.size() == 0}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>
<!--                    <c:if test="${sessionScope.cart.size() == 0}">-->
<!--                        <tr>-->
<!--                            <td colspan="8"><b>Your cart is empty.</b></td>-->
<!--                        </tr>-->
<!--                    </c:if>-->
                    <tr th:each="cartItem:${session.cart}">
                        <td>
                            <a th:href="@{'/catalog/item?itemId='+${cartItem.item.getItemId()}}" th:text="${cartItem.item.itemId}" id="itemId"></a>
                        </td>
                        <td th:text="${cartItem.item.productId}">
                        </td>
                        <td th:text="${cartItem.item.attribute1!=null?cartItem.item.attribute1:''}+' '+${cartItem.item.attribute2!=null?cartItem.item.attribute2:''}+' '+${cartItem.item.attribute3!=null?cartItem.item.attribute3:''}+' '+${cartItem.item.attribute4!=null?cartItem.item.attribute4:''}+' '+${cartItem.item.attribute5!=null?cartItem.item.attribute5:''}+' '+${cartItem.item.product.name}"></td>
                        <td th:text="${cartItem.inStock}"></td>
                        <td>
<!--                            th:onblur="'javascript:updateItem(this,\''+${cartItem.item.itemId}+'\');'-->
                            <input type="text" th:id="'a'+${cartItem.item.itemId}" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" th:onblur="updateItem('[[${cartItem.item.itemId}]]')"/>
                        </td>
                        <td th:text="${'$'+#numbers.formatDecimal(cartItem.item.listPrice,0,'COMMA',2,'POINT')}"></td>
                        <td>
                            <label th:id="${cartItem.item.itemId}" th:text="${'$'+#numbers.formatDecimal(cartItem.totalCost,0,'COMMA',2,'POINT')}">
                            </label>
<!--                            <fmt:formatNumber th:text="${'$'+#numbers.formatDecimal(cartItem.totalCost,0,'COMMA',2,'POINT')}" />-->
                        </td>
                        <td>
                            <a class="Button" th:href="@{'/cart/removeItem?workingItemId='+${cartItem.item.itemId}}">Remove</a>
                        </td>
                    </tr>
                </table>
            </form>
            <span th:if="${session.cart.size()>0}">
                <a class="Button" href = "JavaScript:void(0)" th:onclick = "submitInformation()">Proceed to Checkout</a>
            </span>
<!--            <c:if test="${sessionScope.cart.size() > 0}">-->
<!--                <a class="Button" href = "JavaScript:void(0)" onclick = "submitInformation()">Proceed to Checkout</a>-->
<!--            </c:if>-->

        <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
        <script th:src="@{../js/updateCart.js}"></script>
        </div>
<!--        <%-->
<!--        Order order = new Order();-->
<!--        Account account = (Account)session.getAttribute("account");-->
<!--        List<CartItem> cart = (List<CartItem>)session.getAttribute("cart");-->
<!--        order.initOrder(account, cart);-->
<!--        order.getBillToFirstName();-->
<!--        session.setAttribute("order", order);-->
<!--        %>-->

        <div id = "first" class = "submitBill">
            <div id="Catalog1"></div>
            <form action="conFirmOrderForm" method="post">
                <table>
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select th:name="${session.tempOrder.cardType}">
                                <option>Visa</option>
                                <option>Mastercard</option>
                                <option>Visa</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td><input type="text" th:name="${session.tempOrder.creditCard}" th:value="${session.tempOrder.creditCard}" class = "information"/> </td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input type="text" th:name="${session.tempOrder.expiryDate}" th:value="${session.tempOrder.expiryDate}" class = "information"/></td>
                    </tr>
                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type="text" th:name="${session.tempOrder.billToFirstName}" th:value="${session.tempOrder.billToFirstName}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" th:name="${session.tempOrder.billToLastName}" th:value="${session.tempOrder.billToLastName}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" th:name="${session.tempOrder.billAddress1}" th:value="${session.tempOrder.billAddress1}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" th:name="${session.tempOrder.billAddress2}" th:value="${session.tempOrder.billAddress2}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" th:name="${session.tempOrder.billCity}" th:value="${session.tempOrder.billCity}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" th:name="${session.tempOrder.billState}" th:value="${session.tempOrder.billState}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" th:name="${session.tempOrder.billZip}" th:value="${session.tempOrder.billZip}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text" size="15" th:name="${session.tempOrder.billCountry}" th:value="${session.tempOrder.billCountry}" class = "information"/></td>
                    </tr>
                    <tr>
                        <td colspan=2><input type="checkbox" name="shippingAddressRequired">Ship to different address...</td>
                    </tr>
                </table>
                <br><br>
                <input type="button" class="button1" name="newOrder" th:onclick="confirmInformation()" id = "submitInformation" value="Continue" />
                <input type="button" class="button1" name="newOrder" th:onclick="closeOne()" id = "cancel" value="Cancel" />
            </form>
        </div>
        <div id="fade" class="blackOverlay"></div>
        <div id="second" class ="checkInformation">
            <div id="Catalog2">Please confirm the information below and then press continue...
                <table>
                    <tr>
                        <th align="center" colspan="2">
                            <font size="4">
                                <b>Order</b>
                            </font>
                            <br />
                            <font size="3">
                                <b th:text="${session.tempOrder.orderDate}"></b>
                            </font>
                        </th>
                    </tr>
                    <tr>
                        <th colspan="2">Billing Address</th>
                    </tr>
                    <tr>
                        <td>First name:</td>
                        <td th:text="${session.tempOrder.billToFirstName}"></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td th:text="${session.tempOrder.billToLastName}"></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td th:text="${session.tempOrder.billAddress1}"></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td th:text="${session.tempOrder.billAddress2}"></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td th:text="${session.tempOrder.billCity}"></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td th:text="${session.tempOrder.billState}"></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td th:text="${session.tempOrder.billZip}"></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td th:text="${session.tempOrder.billCountry}"></td>
                    </tr>
                    <tr>
                        <th colspan="2">Shipping Address</th>
                    </tr>
                    <tr>
                        <td>First name:</td>
                        <td th:text="${session.tempOrder.shipToFirstName}"></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td th:text="${session.tempOrder.shipToLastName}"></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td th:text="${session.tempOrder.shipAddress1}"></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td th:text="${session.tempOrder.shipAddress2}"></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td th:text="${session.tempOrder.shipCity}"></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td th:text="${session.tempOrder.shipState}"></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td th:text="${session.tempOrder.shipZip}"></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td th:text="${session.tempOrder.shipCountry}"></td>
                    </tr>
                </table>
                <br><br>
                <input type="button" class = "button1" value = "Confirm" id="neworder">
                <input type="button" class = "button1" value = "Return" th:onclick = "closeTwo()"/>
                <input type="button" class = "button1" value = "Cancel" th:onclick = "closeThree()"/>
            </div>
        </div>

        <script>
            function submitInformation()
            {
                document.getElementById('first').style.display='block';
                document.getElementById('fade').style.display='block';
            }
            function confirmInformation()
            {
                document.getElementById('first').style.display='none';
                document.getElementById('second').style.display='block';
            }
            function closeOne()
            {
                document.getElementById('first').style.display='none';
                document.getElementById('fade').style.display='none';
            }
            function closeTwo()
            {
                document.getElementById('first').style.display='block';
                document.getElementById('second').style.display='none';
            }
            function closeThree()
            {
                document.getElementById('fade').style.display='none';
                document.getElementById('second').style.display='none';
            }
            // function confirmOrder()
            // {
            //     location.href="/catalog/main";
            // }
            $('#neworder').on('click',function (){
                let datas = {'isclick':true};
                $.post('/order/newOrder',datas,function (data){
                    if(data.code ===16){
                        location.href=data.msg;
                    }
                });
            });
        </script>

        <div id="Separator">&nbsp;</div>

    </div>
</div>

<div th:replace="common/bottom">
</div>
</div>
</body>
</html>